/* eslint-disable @typescript-eslint/no-use-before-define */
import { DictValueEnum } from "@/components/DictTag";
import { getRole } from "@/services/api/module/system/role";
import { Key, ModalForm, ProFormSelect } from "@ant-design/pro-components";
import { Form, Input } from "antd";
import { CheckboxValueType } from "antd/es/checkbox/Group";
import React, { useState } from "react";
const { Search } = Input;

export type FormValueType = any & Partial<API.Setting.Role>;

export type DataScopeFormProps = {
	onCancel: (flag?: boolean) => void;
	onSubmit: (values: FormValueType) => Promise<void>;
	open: boolean;
	values: Partial<API.Setting.Role>;
	dataScopeEnums: DictValueEnum;
	// deptTree: DataNode[];
	id: number | undefined;
	deptCheckedKeys: string[];
};

const DataScopeForm: React.FC<DataScopeFormProps> = props => {
	const [form] = Form.useForm();
	const { deptCheckedKeys, onCancel, onSubmit, id, open, dataScopeEnums } = props;
	const [dataScopeType, setDataScopeType] = useState<string | undefined>("1");
	const [deptIds, setDeptIds] = useState<string[] | { checked: string[]; halfChecked: string[] }>([]);
	const [deptTree, setDeptTree] = useState([]);
	const [deptTreeExpandKey, setDeptTreeExpandKey] = useState<Key[]>([]);
	const [checkStrictly, setCheckStrictly] = useState<boolean>(true);
	// 数据获取
	const setFormValue = (id: number) => {
		getRole(id).then(res => {
			// const { user, postIds, roleIds } = res.data;
			form.setFieldsValue({
				id: id,
				roleName: res.data.roleName,
				roleKey: res.data.roleKey,
				roleSort: res.data.sort,
				dataScope: res.data.dataScope
				// status: res.data.status,
				// remark: res.data.remark,
			});
		});
	};
	// 获取树菜单
	const getDeptTree = (id: number) => {
		role.getDeptTreeByRole(id).then(res => {
			console.log(res);
			setDeptTree(res.depts);
		});
	};

	const handleCancel = () => {
		onCancel();
	};
	const handleFinish = async (values: Record<string, any>) => {
		return onSubmit({ ...values, deptIds } as FormValueType);
	};

	// const onDeptOptionChange = (checkedValues: CheckboxValueType[]) => {
	// 	if (checkedValues.includes("deptExpand")) {
	// 		setDeptTreeExpandKey(deptAllNodes);
	// 	} else {
	// 		setDeptTreeExpandKey([]);
	// 	}
	// 	if (checkedValues.includes("deptNodeAll")) {
	// 		setDeptIds(deptAllNodes);
	// 	} else {
	// 		setDeptIds([]);
	// 	}

	// 	if (checkedValues.includes("deptCheckStrictly")) {
	// 		setCheckStrictly(false);
	// 	} else {
	// 		setCheckStrictly(true);
	// 	}
	// };

	return (
		<ModalForm
			width={640}
			title="修改角色数据权限范围"
			open={open}
			form={form}
			grid={true}
			layout="vertical"
			modalProps={{
				destroyOnClose: true,
				onCancel: () => {
					handleCancel();
				}
			}}
			initialValues={
				{
					// login_password: '',
					// confirm_password: '',
				}
			}
			onFinish={handleFinish}
		>
			<ProFormSelect
				name="dataScope"
				label="权限范围"
				initialValue={"1"}
				placeholder="请选择数据权限范围"
				valueEnum={dataScopeEnums}
				rules={[
					{
						required: true
					}
				]}
				fieldProps={{
					onChange: value => {
						setDataScopeType(value);
					}
				}}
			/>
			{/* <ProForm.Item
        name="deptIds"
        label={intl.formatMessage({
          id: 'system.role.auth',
          defaultMessage: '菜单权限',
        })}
        required={dataScopeType === '1'}
        // hidden={dataScopeType !== '1'}
      >
        <Row gutter={[16, 16]}>
          <Col md={24}>
            <Checkbox.Group
              options={[
                { label: '展开/折叠', value: 'deptExpand' },
                { label: '全选/全不选', value: 'deptNodeAll' },
                { label: '父子联动', value: 'deptCheckStrictly' },
              ]}
              onChange={onDeptOptionChange}
            />
          </Col>
          <Col md={24}>
            <Card
              style={{
                width: '100%',
                height: '35vh',
              }}
            >
              <Search
                placeholder="input search text"
                style={{ width: '100%', marginBottom: '10px' }}
              />

              <Tree
                blockNode={true}
                checkable={true}
                checkStrictly={checkStrictly}
                expandedKeys={deptTreeExpandKey}
                treeData={deptTree}
                checkedKeys={deptIds}
                fieldNames={{
                  title: 'label',
                  key: 'id',
                }}
                defaultCheckedKeys={deptCheckedKeys}
                onCheck={(checkedKeys: any, checkInfo: any) => {
                  console.log(checkedKeys, checkInfo);
                  if (checkStrictly) {
                    return setDeptIds(checkedKeys.checked);
                  } else {
                    return setDeptIds({
                      checked: checkedKeys,
                      halfChecked: checkInfo.halfCheckedKeys,
                    });
                  }
                }}
                onExpand={(expandedKeys: Key[]) => {
                  setDeptTreeExpandKey(deptTreeExpandKey.concat(expandedKeys));
                }}
              />
            </Card>
          </Col>
        </Row>
      </ProForm.Item> */}
		</ModalForm>
	);
};

export default DataScopeForm;
